<template>
  <el-dialog width="1420px"
    top="9%"
    append-to-body
    custom-class="alarmInfo"
    :close-on-click-modal="false"
    :before-close="handleClose"
    destroy-on-close
    :visible.sync="visible"
    :title="'告警信息'">
    <el-container>
      <div style="display: flex; width: 100%">
        <div class="box-a">

          <div class="box-a-content">
            <div class="box-a-content-item">
              <div class="item-label">告警时间：</div>
              <div class="item-value">
                {{ systemMsg.alertTime }}
              </div>
            </div>
            <div class="box-a-content-item">
              <div class="item-label">设备名称：</div>
              <div class="item-value">
                {{ systemMsg.deviceName != null ? systemMsg.deviceName : "-" }}
              </div>
            </div>
            <div class="box-a-content-item">
              <div class="item-label">设备编码：</div>
              <div class="item-value">
                {{ systemMsg.deviceSource }}
              </div>
            </div>

            <div class="box-a-content-item">
              <div class="item-label">设备类型：</div>
              <div class="item-value">
                {{
                  systemMsg.deviceTypeStr != null ? systemMsg.deviceTypeStr : ""
                }}
              </div>
            </div>

            <div class="box-a-content-item">
              <div class="item-label">设备区分：</div>
              <div class="item-value">
                {{ systemMsg.deviceIsLine == 0 ? "传统有线" : "智能无线" }}
              </div>
            </div>

            <div class="box-a-content-item">
              <div class="item-label">告警地点：</div>
              <div class="item-value">
                {{
                  systemMsg.deviceAddress != null
                  ? systemMsg.deviceAddress
                  : "-"
                }}
              </div>
            </div>
            <div class="box-a-content-item">
              <div class="item-label">告警类型：</div>
              <div class="item-value">
                <el-tag size="small"
                  :style="
                    systemMsg.deviceStatus
                    | constantKeyTagStyleObj('WARNING_TYPE')
                  ">
                  {{
                    systemMsg.deviceStatus | constantKeyValue("WARNING_TYPE")
                  }}
                </el-tag>
              </div>
            </div>
            <div class="box-a-content-item">
              <div class="item-label">确认状态：</div>
              <div class="item-value"
                :style="{
                  color:
                    systemMsg.confirmRemark == '未确认' ? '#2A7BFF' : '#e6a23c',
                }">
                {{ systemMsg.confirmRemark }}
              </div>
            </div>

            <div class="box-a-content-item">
              <div class="item-label">告警状态：</div>
              <div class="item-value">
                <el-tag size="small"
                  :style="
                    systemMsg.solveStatus
                    | constantKeyTagStyleObj('HANDLE_STATUS')
                  "
                  style="margin: 0 3px">
                  {{
                    systemMsg.solveStatus | constantKeyValue("HANDLE_STATUS")
                  }}
                </el-tag>
              </div>
            </div>

            <div class="box-a-content-item">
              <div class="item-label">工单状态：</div>
              <div class="item-value">
                <el-tag size="small"
                  :style="
                    systemMsg.jobStatus | constantKeyTagStyleObj('ORDER_STATUS')
                  ">
                  {{ systemMsg.jobStatus | constantKeyValue("ORDER_STATUS") }}
                </el-tag>
              </div>
            </div>

            <div class="box-a-content-item"
              style="margin-bottom: 10px;padding-top: 10px;justify-content: center;">
              <el-button type="primary"
                style=" background: #2a7bff"
                @click="confirm(systemMsg)">确认</el-button>
              <el-button type="warning"
                style=" background: #ff9900"
                v-if="!systemMsg.alarmJobCode && systemMsg.eliminateType !== 1"
                @click="eliminateHandle">
                消除警报</el-button>
              <el-button type="warning"
                style="background: #ff6200"
                v-if="systemMsg.solveStatus === 0 && systemMsg.jobStatus == 0"
                @click="dispatchHandle">工单派发</el-button>
            </div>
          </div>
        </div>
        <div class="box-b">
          <div class="model-content"
            style="position: relative">
            <div v-if="model == '监控'"
              style="width: 100%; height: 100%">
              <!-- <iframe
                :src="systemMsg.streamUrl"
                height="100%"
                width="100%"
                allowfullscreen
                allow="autoplay; fullscreen; microphone;"
                v-if="model == '监控'"
              ></iframe> -->
              <monitorModel v-if="model == '监控'"
                :systemMsg="systemMsg" />
            </div>
            <div v-if="model == '地图'"
              style="width: 100%; height: 100%">
              <mapModel v-if="model == '地图'"
                :systemMsg="systemMsg" />
            </div>
            <div v-if="model == '2D'">
              <div style="position: absolute; z-index: 99; top: 0">
                <el-button @click="resetCanvas">重置图纸</el-button>
                注：拖拽需按住alt键
              </div>
              <planModel ref="planModel"
                v-if="model == '2D'"
                :systemMsg="systemMsg" />
            </div>
          </div>

          <div class="model">
            <div v-for="(item, index) in modelList"
              :key="index"
              class="model-item"
              :class="item.value == model ? 'model-item-selected' : 'none'"
              @click="switchModel(item.value)">
              <img :src="item.img"
                alt=""
                class="model-item-img" />
              <span class="model-item-label">{{ item.value }}</span>
            </div>
          </div>
          <!-- <iframe
            :src="systemMsg.streamUrl"
            height="100%"
            width="100%"
            allowfullscreen
            allow="autoplay; fullscreen; microphone;"
          ></iframe> -->
        </div>
      </div>
    </el-container>
    <distribute v-if="isDistributeVisible"
      ref="distributeDialog"
      :systemMsg="distributeParams"
      :dialog-visible="isDistributeVisible"
      @close="closeDialog"
      @success="successDialog" />

    <eliminateWarning v-if="isEliminateVisible"
      ref="eliminateDialog"
      :systemMsg="params"
      :dialog-visible="isEliminateVisible"
      :alarmReasonData="alarmReasonData"
      @close="closeDialog"
      @success="successDialog" />
  </el-dialog>
</template>

<script>
import deviceManageApi from '@/api/device-manage'
import warningManageApi from '@/api/warning-manage'
import Distribute from './Distribute'
import EliminateWarning from './EliminateWarning'
import MapModel from './MapModel'
import PlanModel from './PlanModel'
import globalConstant from '@/utils/constants'
import MonitorModel from './MonitorModel'

const appEl = document.querySelector("#app");
import moment from "moment";
import LivePlayer from "@liveqing/liveplayer";
moment.locale("zh-cn");
export default {
  name: "AlarmInfo",
  components: {
    Distribute,
    EliminateWarning,
    MapModel,
    PlanModel,
    LivePlayer,
    MonitorModel
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    systemMsg: {
      type: Object,
      default: null,
    },
  },
  data () {
    return {
      // systemMsg: {},

      moment: moment,
      // visible: false,
      // isView: true,
      // videoVisible: false,
      equipmentId: null,
      // mapVisible: false,
      collectName: "",
      equipmentHasMonitor: false, // 设备是否关联了监控
      equipmentHasPlan: false, // 设备是否关联了平面图
      // equipmentPlanData: {}, // 设备平面图数据

      floorMsg: {},
      audioSrc: "",
      audio: null,
      systemMsgData: null,
      deviceDictionaries: [],
      players: {
        serial: "",
        code: "",
        videoUrl: "", // process.env.VUE_APP_VIDEO_API + 'uploads/image/vidio/222.mp4',
        protocol: "",
        poster: "", // 视频封面图片 String default ''
        bLoading: true, // 指示加载状态, 支持 sync 修饰符
        bCloseShow: true,
        bControls: true, // 显示播放器控制栏 Boolean default true
        bSmart: true,
        bFullscreen: true,
        closeTimer: 0,
        device_id: "",
        device_name: "",
      },

      // 工单派发
      distributeParams: null,
      isDistributeVisible: false,

      // 直接消警
      isEliminateVisible: false,
      params: null,
      alarmReasonData: [], // 消警原因

      modelList: [
        {
          label: "地图模式",
          value: "地图",
          img: require(`@/assets/alarm-dialog/map_model.png`),
        },
        {
          label: "监控模式",
          value: "监控",
          img: require(`@/assets/alarm-dialog/monitor_model.png`),
        },
        {
          label: "2D模式",
          value: "2D",
          img: require(`@/assets/alarm-dialog/2d_model.png`),
        },
      ],
      model: "地图",
    };
  },
  mounted () {
    const THIS = this;
    appEl.setAttribute("isdotts", 0);
    appEl.onclick = function (e) {
      const isdotts = appEl.getAttribute("isdotts");
      if (isdotts === "1") {
        THIS.doTTS();
        appEl.setAttribute("isdotts", 0);
      }
    };

    this.deviceTypeDictionaries(); // 获取设备类型

    this.getAlarmType(); // 消警原因

    this.initAudio(); // 语音播报

    this.initVideo();

    // this.$nextTick(() => {
    //   this.mapVisible = true
    // })
  },
  methods: {
    doTTS () {
      console.log();
      var msg = new SpeechSynthesisUtterance(
        this.systemMsg.deviceAddress +
        "，" +
        // this.systemMsg.deviceSource +
        // '，' +
        // this.systemMsg.deviceName +
        // '，' +
        // this.systemMsg.alarmName
        globalConstant.WARNING_TYPE[this.systemMsg.deviceStatus].text
      );
      msg.volume = 100;
      msg.rate = 1;
      msg.pitch = 1.5;
      window.speechSynthesis.speak(msg);
    },

    initAudio () {
      this.audio = new Audio();
      this.audio.src =
        this.systemMsg.deviceStatus === 1
          ? require("@/assets/aduio/guzhang.mp3")
          : require("@/assets/aduio/huojing.mp3");
      this.audio.play();
      setTimeout(() => {
        appEl.setAttribute("isdotts", 1);
        appEl.click();
      }, 1000);
    },
    initVideo () {
      warningManageApi
        .getByEquipmentId({
          equipmentId: this.systemMsg.equipment.id,
        })
        .then((res) => {
          // 判断该设备是否有关联的监控
          if (res.data) {
            const layout = JSON.parse(res.data.layout);
            if (layout.length === 0) {
              this.players.videoUrl =
                process.env.VUE_APP_VIDEO_API + "uploads/image/vidio/222.mp4";
            } else {
              this.players.videoUrl = layout;
            }
          }
        });
    },

    deviceTypeDictionaries () {
      const data = {
        fieldName: "collect_type",
        tableName: "t_equipment_collect",
      };
      deviceManageApi.getDictValueAttr(data).then((r) => {
        this.deviceDictionaries = r.data.dictValue;
        const deviceList = this.deviceDictionaries.filter(
          (x) => x.dictValue === this.systemMsg.deviceType
        );
        if (deviceList.length > 0) {
          this.systemMsg["deviceTypeStr"] = deviceList[0].dictText;
        }
      });
    },
    getAlarmType () {
      const data = {
        fieldName: "alarm_actual_desc_2",
        tableName: "t_job_reply",
      };
      deviceManageApi.getDictValueAttr(data).then((r) => {
        this.alarmReasonData = r.data.dictValue;
      });
    },

    // 报警确认
    confirm (systemMsg) {
      warningManageApi
        .confirmAlertTime({
          alertId: [systemMsg.id],
        })
        .then((r) => {
          this.$message({
            message: "已确认",
            type: "success",
          });
          this.handleClose();
        });
    },
    // 直接消警
    eliminateHandle () {
      this.isEliminateVisible = true;
      this.params = this.systemMsg;
    },
    // 工单派发
    dispatchHandle () {
      this.distributeParams = this.systemMsg;
      this.isDistributeVisible = true;
      // this.$nextTick(() => {
      //   this.$refs['orderDistributionList'].visible = true
      //   this.$refs['orderDistributionList'].init(this.systemMsg)
      // })
    },
    successDialog () {
      this.isDistributeVisible = false;
      this.isEliminateVisible = false;
      this.handleClose();
    },
    closeDialog () {
      this.isDistributeVisible = false;
      this.isEliminateVisible = false;
    },

    handleClose () {
      // if (this.$refs.newMap.popMarker.marker) {
      //   this.$refs.newMap.popMarker.close()
      // }
      // this.$refs.newMap.dialogClose()
      // this.visible = false
      // this.mapVisible = false
      // this.$store.commit('cim/setIsUpdate', new Date())
      // this.visible = false
      console.log("测试");
      this.$emit("close", false);
    },

    switchModel (model) {
      this.model = model;
    },

    eliminateHandleSuccess () {
      this.$refs.eliminateAlarm.visible = false;
      const arr = this.systemMsgList.filter(
        (el) =>
          el.equipmentCollect &&
          el.equipmentCollect.id !== this.systemMsg.equipmentCollect.id
      );
      // this.visible = false
      this.handleClose();
      this.$store.commit("cim/resetMsg", arr);
      this.$emit("getData");
    },
    showView (msg) {
      this.equipmentId = msg.equipmentCollect.id;
      this.collectName = msg.equipmentCollect.collectName;
      this.$refs["pEasyLayer"].visible = true;
    },
    async addQuaranHandle () {
      const res = await this.$get(
        `console/equipmentCollect/${this.systemMsg.equipmentCollect.id}`
      );
      this.$refs["addQuaran"].visible = true;
      this.$refs["addQuaran"].init(
        res.data.equipmentCollectIsolation
          ? res.data.equipmentCollectIsolation
          : { id: this.systemMsg.equipmentCollect.id },
        !!res.data.equipmentCollectIsolation
      );
    },
    resetCanvas () {
      this.$refs.planModel.resetCanvas();
    }
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-dialog {
  // width: 70%;
  box-shadow: 0 0 10px #eccdb7 !important;
}

/deep/.el-dialog__header {
  padding: 8px 16px;
  padding: 8px 16px;
  color: rgba(0, 0, 0, 0.65);
  background: #eff2f4 !important;
  border-bottom: 1px solid #d8d8d8 !important;
  border-radius: 4px 4px 0 0;
}

/deep/.el-dialog__title {
  font-family: SourceHanSans;
  font-size: 18px;
  color: #272c33;
  font-weight: 500;
}

/deep/.el-dialog__headerbtn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 20px;
}

/deep/.el-dialog__body {
  padding: 15px 20px !important;
  color: #606266 !important;
  font-size: 14px !important;
  word-break: break-all !important;
}

/deep/.el-button {
  padding: 7px 15px;
  border-radius: 6px !important;
}

.box-a {
  // width: 30%;
  // width: 400px;
  width: 322px;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #d8d8d8;
}

.box-a-header {
  padding: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #6c6969;
  border-bottom: 1px solid rgba(122, 122, 122, 0.22);
}

.box-a-content {
  // padding: 20px 15px;
  padding: 20px 27px 20px 22px;
}

.box-a-content-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  justify-content: center;
  align-items: center;
}

.item-label {
  width: 80px;
  text-align: right;
  font-weight: 500;
  color: #272c33;
  font-family: SourceHanSans;
  display: flex;
  // align-items: center;
}

.item-value {
  color: #858181;
  flex: 1;
  font-weight: 500;
  color: #272c33;
  font-family: SourceHanSans;
  line-height: 16px;
}

.box-b {
  flex: 1;
  margin-left: 5px;
  display: flex;
  width: 100%;
  height: 100%;

  .model {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    width: 40px;
  }

  .model-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    width: 40px;
    height: 40px;
    box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.24);
    border-top: 1px solid hsla(0, 0%, 87.5%, 0.5);
    cursor: pointer;
    animation: all 1s;
  }

  .model-item:hover {
    background: rgb(212, 211, 211);
  }

  .model-item-selected {
    background: rgb(243, 90, 88);
  }

  .model-item-img {
    width: 20px;
    height: 20px;
  }

  .model-item-label {
    font-weight: 400;
    font-size: 12px;
    color: #1883fa;
    margin-top: -2px;
  }

  .model-item-label-selected {
    color: white;
  }

  .model-content {
    flex: 1;
  }
}
</style>
